<template>
  <div class="recharge-account">
    <h1 style="font-size: 23px;">账户充值</h1>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <h1 class="tip">
      <el-icon style="margin-right: 5px;">
        <InfoFilled/>
      </el-icon>
      请选择要充值的账户和充值方式
    </h1>


    <el-card v-loading="loading" class="personal-account">
      <el-radio v-model="rechargeType" label="personal" size="large" @click="storeRechargeRadio = -1">个人账户</el-radio>
      <!-- 申请信息展示表格 -->
      <el-descriptions :column="1" size="default" border>
        <el-descriptions-item label="账户ID" label-align="center" align="center">
          {{ userAccount.account.accountId }}
        </el-descriptions-item>
        <el-descriptions-item label="账户余额" label-align="center" align="center">
          {{ userAccount.account.balance.toFixed(2) }}
        </el-descriptions-item>
        <el-descriptions-item label="账户状态" label-align="center" align="center">
          <el-tag type="success" v-if="userAccount.account.status === 1">正常</el-tag>
          <el-tag type="danger" v-else-if="userAccount.account.status === 2">已注销</el-tag>
          <el-tag type="warning" v-else>异常</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card v-loading="loading" class="store-account" v-if="store.state.user.role === 2">
      <el-radio v-model="rechargeType" :disabled="storeAccountList.length === 0" label="store" size="large">商店账户
      </el-radio>
      <el-table :data="storeAccountList">
        <el-table-column label="选择" width="60">
          <template v-slot="scope">
            <el-radio :disabled="rechargeType !== 'store' || scope.row.status !== 1" :label="scope.$index"
                      v-model="storeRechargeRadio">
              {{ "" }}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="accountId" label="商店账户ID"></el-table-column>
        <el-table-column label="商店名称">
          <template v-slot="scope">
            <div v-if="stores.length > scope.$index">{{ stores[scope.$index].storeName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="账户余额">
          <template v-slot="scope">
            {{ scope.row.balance.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="账户状态">
          <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status === 2">已注销</el-tag>
            <el-tag type="warning" v-else>异常</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="input-recharge">
      <div>充值金额：</div>
      <!-- 利用element-plus自带的数字输入 -->
      <el-input-number :precision="2" :controls="false" style="width: 50%;" v-model="rechargeAmount"
                       placeholder="请输入充值金额" :value-on-clear="100.00" :max="10000000.00" :min="0.01"/>
      <el-button type="primary" style="margin-left: 20px" @click="recharge">确认充值</el-button>
    </div>
  </div>
</template>


<script setup>
import {onMounted, reactive, getCurrentInstance, ref} from 'vue'
import {useStore} from 'vuex'

const store = useStore();
const {proxy} = getCurrentInstance();

let loading = ref(false);
let rechargeType = ref('');
let rechargeAmount = ref(100.00)
let storeRechargeRadio = ref(-1)

const userAccount = reactive({
  account: {
    "accountId": "",
    "balance": 0,
    "status": 0
  }
});
let storeAccountList = ref([]);
let stores = ref([]);

// 获取个人账户信息
const getMyUserAccount = async (userId) => {
  let res = await proxy.$api.account.getPersonalAccount({
    userId: userId
  });
  userAccount.account = res.data;
}

// 获取商户的所有商店账户
const getStoreAccountFromSeller = async (userId) => {
  let res = await proxy.$api.account.getStoreAccountFromUser({
    userId: userId
  }).catch(error => console.log(error));
  storeAccountList.value = res.data;
}

// 获取商户拥有的所有商店
const getMyStore = async (userId) => {
  let res = await proxy.$api.store.getSellerStore(userId);
  stores.value = res.data;
}

// 进行充值
const recharge = async () => {
  if (rechargeType.value !== 'personal' && rechargeType.value !== 'store') {
    ElMessage.warning({showClose: true, message: "请选择要充值的账户"});
  } else {
    loading.value = true;
    let res;  // 请求的结果
    if (rechargeType.value === 'personal') {
      res = await proxy.$api.account.rechargePersonalAccount({
        userId: store.state.user.userId,
        amount: rechargeAmount.value,
      }).catch(error => {
        console.log(error);
        loading.value = false;
        ElMessage.error({showClose: true, message: "充值失败"});
      })
    } else {
      if (storeRechargeRadio.value < 0) {
        ElMessage.warning({showClose: true, message: "请选择要充值的商店账户"});
        loading.value = false;
        return;
      }
      res = await proxy.$api.account.rechargeStoreAccount({
        storeId: stores.value[storeRechargeRadio.value].storeId,
        amount: rechargeAmount.value,
      }).catch(error => {
        console.log(error);
        loading.value = false;
        ElMessage.error({showClose: true, message: "充值失败"});
      })
    }
    if (res.status === 200) {
      ElMessage.success({showClose: true, message: "充值成功",});
      await getMyUserAccount(store.state.user.userId);
      if (store.state.user.role === 2) {
        await getStoreAccountFromSeller(store.state.user.userId);
        await getMyStore(store.state.user.userId);
      }
      loading.value = false;
    }
  }
}

onMounted(async () => {
  loading.value = true;
  await getMyUserAccount(store.state.user.userId);
  if (store.state.user.role === 2) {
    try {
      await getStoreAccountFromSeller(store.state.user.userId);
      await getMyStore(store.state.user.userId);
    } catch (error) {
      loading.value = false;
    }
  }
  loading.value = false;
});
</script>


<style lang="less" scoped>
.recharge-account {
  background: linear-gradient(180deg, #ecf0f5ee 0%, #ffffffea 100%);
  padding: 30px;
  border-radius: 10px;

  /* 分割线 */

  .el-divider {
    border-top: 2px solid rgba(170, 165, 165, 0.651);
  }

  .tip {
    display: flex;
    margin-bottom: 20px;
  }

  .personal-account {
    margin-top: 30px;
  }

  .store-account {
    margin-top: 30px;
  }

  .input-recharge {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
}
</style>